<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-button type="primary" @click="handleAdd">添加商品</el-button>
        </el-col>
      </el-row>

      <el-table border style="width: 100%; margin-top:20px" :data="productList">
        <el-table-column label="添加日期" prop="createTime" width="100px"></el-table-column>
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="单价" prop="price" width="100"></el-table-column>
        <el-table-column label="库存" prop="count" width="100"></el-table-column>
        <el-table-column label="被购次数" prop="number" width="100"></el-table-column>
        <el-table-column label="货源" prop="address" width="150"></el-table-column>
        <el-table-column label="图片" prop="picture">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.picture"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="简介" prop="intro"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index,scope.row)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-delete"
              @click="handleDelet(scope.$index,scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>

      <!-- 修改商品表单弹框 -->
      <el-dialog :visible.sync="editProductFormVisible" width="30%">
        <el-form :model="editProductForm" label-width="80px">
          <el-form-item label="ID">
            <el-input v-model="editProductForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="editProductForm.name"></el-input>
          </el-form-item>
          <el-form-item label="单价">
            <el-input v-model="editProductForm.price"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="editProductForm.count"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-input v-model="editProductForm.picture"></el-input>
            <el-upload
              class="upload-demo"
              action="/api/admin/getImgUrl"
              multiple
              :limit="3"
              :on-exceed="editExceed"
              :file-list="fileList"
              :on-success="editSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="货源">
            <el-input v-model="editProductForm.address"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="editProductForm.intro"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editProductFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editProduct">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加商品表单弹框 -->
      <el-dialog :visible.sync="addProductFormVisible" width="30%">
        <el-form :model="addProductForm" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="addProductForm.name"></el-input>
          </el-form-item>
          <el-form-item label="单价">
            <el-input v-model="addProductForm.price"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="addProductForm.count"></el-input>
          </el-form-item>
          <el-form-item label="货源">
            <el-input v-model="addProductForm.address"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-input v-model="addProductForm.picture"></el-input>
            <el-upload
              class="upload-demo"
              action="/api/admin/getImgUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :on-success="handleSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="addProductForm.intro"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addProductFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addProduct">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editProductFormVisible: false,
      addProductFormVisible: false,
      currentPage: 1,
      fileList: [],
      productList: [],
      editProductForm: {
        id: 0,
        name: "",
        price: "",
        count: "",
        address: "",
        picture: "",
        intro: ""
      },
      addProductForm: {
        name: "",
        price: "",
        count: "",
        address: "",
        picture: "",
        intro: ""
      }
    };
  },
  mounted() {
    this.currentPage = 1;
    this.getProductList(this.currentPage);
  },
  methods: {
    handleAdd() {
      this.addProductFormVisible = true;
    },
    handleEdit(index, row) {
      this.editProductFormVisible = true;
      this.editProductForm = row;
    },
    handleDelet(index, row) {
      this.deletProduct(index, row);
    },
    //添加商品
    async addProduct() {
      this.addProductFormVisible = false;

      const { data: res } = await this.$http.post(
        "/admin/addProduct",
        this.addProductForm
      );
      if (res.code == 200) {
        this.getProductList(this.currentPage);
        this.$message({
          type: "success",
          message: "添加成功!"
        });
      } else {
        this.$message.error(res.message);
      }
    },

    //修改商品
    async editProduct() {
      this.editProductFormVisible = false;
      const { data: res } = await this.$http.post(
        "/admin/updateProduct",
        this.editProductForm
      );
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      } else {
        this.$message.error(res.message);
      }
    },

    // 删除商品
    async deletProduct(index, row) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data: res } = await this.$http.post(
            "/admin/deleteProduct",
            row
          );
          if (res.code == 200) {
            this.productList.splice(index, 1);

            this.$message({
              type: "success",
              message: "删成功成功!"
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //获取商品列表
    async getProductList(val) {
      const { data: res } = await this.$http.get(
        "/admin/getProductList/" + val
      );
      if (res.code == 200) {
        this.productList = res.data.productList;
      } else {
        this.$message({
          type: "info",
          message: "获取列表失败"
        });
      }
    },

    //换页
    handleCurrentChange(val) {
      // console.log(val);
      this.currentPage = val;
      this.getProductList(val);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 图片上传成功
    handleSuccess(res, file) {
      //图片上传成功
      // console.log(res);
      if (res.code == 200) {
        this.addProductForm.picture = res.data.OssUrl;
      }
    },

    // 编辑上传图片
    editSuccess(res, file) {
      console.log(res);
      if (res.code == 200) {
        this.editProductForm.picture = res.data.OssUrl;
      }
    },
    editExceed() {}
  }
};
</script>

<style lang="less" scoped>
</style>>
